<template>
	<view>
		<view class="top">
			<view class="sys-head">
				<view class="sys-bar" :style="{height:sysHeight}"></view>
				<view class="sys-title">
					<text class="iconfont icon-shouye6" @click="goHome"></text>支付结果
				</view>
			</view>
			<view class="pay_info">
				<image src="/static/images/dui.png" mode=""></image>
				<text class="status">{{ status == 'pay_complete' ? '支付成功' : '支付失败'}}</text>
				<text>{{ status == 'pay_complete' ? '已支付' : '订单金额' }}￥{{ money }}</text>
			</view>
		</view>
		<view class="btn_group">
			<view class="btn" @click="goOrder">查看订单</view>
			<view class="btn" @click="goHome">回到首页</view>
		</view>
		<view class="copyright">
			<image src="/static/images/shop_zhichi.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	export default {
		data() {
			return {
				sysHeight: sysHeight,
				money: '0',
				status: '',
				orderId: ''
			};
		},
		onLoad(opt) {
			console.log(opt)
			if(opt) {
				this.money = opt.money
				this.status = opt.status
				this.orderId = opt.orderId
			}
		},
		methods: {
			goHome() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			goOrder() {
				uni.navigateTo({
					
					// url: '/pages/points_mall/shop_order_detail?order_id=' + this.orderId
					url: '/pages/users/order_details/index?order_id=' + this.orderId
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
.top {
	width: 100%;
	height: 740rpx;
	background: url("~@/static/images/pay_success.jpg") no-repeat top;
	background-size: 100% auto;
}
.sys-head {
	width: 100%;
	.sys-title {
		position: relative;
		z-index: 10;
		height: 43px;
		text-align: left;
		line-height: 43px;
		font-size: 32rpx;
		color: #FFFFFF;
		padding-left: 30rpx;
		.icon-shouye6 {
			background-color: #fff;
			color: #000000;
			border-radius: 50%;
			padding: 10rpx;
			font-size: 32rpx;
			margin-right: 20rpx;
		}
	}
}
.pay_info {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 20rpx;
	image {
		width: 70rpx;
		height: 70rpx;
	}
	text {
		color: #eee;
		font-size: 30rpx;
	}
	.status {
		font-size: 36rpx;
		color: #fff;
		margin: 15rpx 0 10rpx;
	}
}
.btn_group {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	.btn {
		width: 440rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background-image: linear-gradient(to right, #9cc93b, #b6e062);
		color: #fff;
		font-size: 30rpx;
		margin-bottom: 50rpx;
		border-radius: 50rpx;
		&:last-child {
			background-image: unset;
			color: #acd851;
			border: 1px solid #acd851;
		}
	}
}
.copyright {
	position: fixed;
	bottom: 100rpx;
	width: 100%;
	text-align: center;
	image {
		width: 400rpx;
	}
}
</style>
